/*
 * @Author: your name
 * @Date: 2021-10-13 16:30:38
 * @LastEditTime: 2021-10-13 17:00:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /ant-design-pro-5/src/pages/d3/components/csv.tsx
 */
import React from "react";
import { Upload, Button, Input } from "antd";
const { TextArea } = Input;
import Papa from "papaparse"; // 解析cvs插件 市面上使用较多的
import jschardet from "jschardet"; // 编码识别

export default class Csv extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      json: "",
      csvParseData: [],
    };
  }
  // 检查编排
  checkEncoding = (base64Str: any) => {
    //这种方式得到的是一种二进制串
    const str = atob(base64Str.split(";base64,")[1]); // atob  方法 Window 对象 定义和用法 atob() 方法用于解码使用 base-64 编码的字符
    //要用二进制格式
    let encoding = jschardet.detect(str);
    encoding = encoding.encoding;
    // 有时候会识别错误
    if (encoding == "windows-1252") {
      encoding = "ANSI";
    }
    return encoding;
  };
  render() {
    const _this = this;
    const props = {
      beforeUpload: (file) => {
        const fReader = new FileReader();
        fReader.readAsDataURL(file); //  readAsDataURL 读取本地文件 得到的是一个base64值
        fReader.onload = function (evt) {
          // 读取文件成功
          const data = evt.target.result;
          const encoding = _this.checkEncoding(data);
          //papaparse.js 用来解析转换成二维数组
          Papa.parse(file, {
            encoding: encoding,
            complete: function (results) {
              // UTF8 \r\n与\n混用时有可能会出问题
              const res: any = results.data;

              if (res[res.length - 1] === "") {
                //去除最后的空行 有些解析数据尾部会多出空格
                res.pop();
              }
              const keys: string[] = res[0];
              const json = res.slice(1).map((item: any) => {
                let obj = {};
                keys.forEach((k, idx: number) => {
                  obj[k] = item[idx];
                });
                return obj;
              });
              // 当前res 就是二维数组的值 数据拿到了 那么在前端如何处理渲染 就根据需求再做进一步操作了
              //_this.setState(res);
              _this.setState({ json: JSON.stringify(json) });
            },
          });
        };
        return false;
      },
    };
    return (
      <>
        <Upload {...props}>
          <Button>点击上传csv</Button>
        </Upload>
        <TextArea
          placeholder="textarea with clear icon"
          allowClear
          value={this.state.json}
          rows={50}
        />
      </>
    );
  }
}
